<template>
	<view class="community-page bg-white" v-if="communityDetail.dyid">
		<!--标题栏-->
		<bar-title bgColor="bg-white"
			:isBack="true"
		>
			<block slot="content">{{format.textdata(communityDetail.dytitle)}}</block>
		</bar-title>
		
		<view class="community-dy">
			<block v-for="(item, index) of communityDetail.list" :key="index">
				<view class="" v-if="item.filetype == 'I'">
					<image class="dy-img" :src="item.dycover" mode="widthFix"></image>
					<view class="dy-text">
						{{format.textdata(item.filedes)}}
					</view>
				</view>
				
				<view class="" v-if="item.filetype == 'V'">
					<video class="dy-video"
						:src="item.dyfileurl"
						@error="videoErrorCallback"
						enable-danmu
						danmu-btn
						controls
					></video>
					<view class="dy-text">
						{{format.textdata(item.filedes)}}
					</view>
				</view>
				
			</block>
			
		</view>
		
		<view class="shop padding-lr padding-bottom" 
			v-if="communityDetail.shopname || communityDetail.scenname">
			<view class="shop_shadow">
				<view class="shop-mode" 
					v-if="communityDetail.shopname"
					@click="$jumpPages('shopinfo',{shopid: communityDetail.shopid})"
				>
					<view class="img-warp">
						<image class="img" :src="communityDetail.shopimg" mode="aspectFill"></image>
					</view>
					<view class="icon-warp" @click.stop="onShopCollect">
						<image class="icon" v-if="communityDetail.shopCollect=='Y'" 
						src="/static/img/s_start_full.png" mode="aspectFill"></image>
						<image class="icon" v-else 
						src="/static/img/s_start.png" mode="aspectFill"></image>
						<view class="num">{{communityDetail.shopContNum}}</view>
					</view>
					<view class="text-warp">
						<view class="title">{{communityDetail.shopname}}</view>
						<view class="desc">{{communityDetail.dyaddress}}</view>
					</view>
				</view>
				
				<view class="shop-mode" 
					v-if="communityDetail.scenname"
					@click="$jumpPages('scenario', {scenid: communityDetail.scenid})"
				>
					<view class="img-warp">
						<image class="img" :src="communityDetail.scenimg" mode="aspectFill"></image>
					</view>
					<view class="icon-warp">
						<image class="icon" src="/static/img/s_flag.png" mode="aspectFill"></image>
						<view class="num">{{communityDetail.usecount}}</view>
					</view>
					<view class="text-warp">
						<view class="title">{{communityDetail.scenname}}</view>
						<view class="desc">{{communityDetail.scencontext}}</view>
					</view>
				</view>
			</view>
		</view>	  

		<view class="dy-foot">
			<view class="date">
				编辑于{{format.timedata(communityDetail.createtime, fullYear)}}
			</view>
			<view class="browse">
				{{communityDetail.browsenum}}人看过
			</view>
		</view>
		
		<view class="dy-commit solid-top">
			<view class="commit-input">
				<view class="avater-warp">
					<image class="avater"  :src="userInfo.headurl" mode="aspectFill"></image>
				</view>
				<view class="input" @click.stop="onShowComment">
					说点什么吧
				</view>
			</view>
			<block v-for="(commit, index) of communityCommit" :key="index">
				<view class="commit-warp">
					<view class="avater-warp">
						<image class="avater"  :src="commit.headurl" mode="aspectFill"></image>
					</view>
					
					<view class="commit-info">
							<view class="nickname">{{commit.nickname}}
								<text v-if="communityDetail.username==commit.username"
								class="cu-tag sm margin-left-xs round"
								>作者</text>
							</view>
							<view class="comment" @click.stop="onShowComment(commit)">
								{{format.textdata(commit.replytext)}}
								<text class="data">{{format.timedata(commit.createtime, fullYear)}}</text>
							</view>
					</view>
					<view class="commit-num">
						<view class="num-warp" @click="onLike(commit)">
							<view class="cuIcon-like" v-if="commit.islike=='N'"></view>
							<view class="cuIcon-likefill text-red" v-else></view>
							<view class="num">{{commit.likenum}}</view>
						</view>
					</view>
				</view>
				<view class="text-cyan reply-more"
					v-if="commit.replynum!=0&&commit.replyList.length==0"
					@click="getCommunityReplyList(index,commit.commentid)"
				>
					展开全部回复<text class="cuIcon-unfold"></text>
				</view>
				<view class="reply-list" v-if="commit.replyList.length">
					<block v-for="(reply, replynum) of commit.replyList" :key="replynum">
					<view class="reply-item">
						<view class="avater-warp">
							<image class="avater"  :src="reply.headurl" mode="aspectFill"></image>
						</view>
						<view class="commit-info">
							<view class="nickname">{{reply.nickname}}
								<text v-if="communityDetail.username==reply.username"
								class="cu-tag sm margin-left-xs round"
								>作者</text>
							</view>
							<view class="comment" @click.stop="onShowComment(reply)">
								回复 {{reply.othernickname}}：{{format.textdata(reply.replytext)}}
								<text class="data">{{format.timedata(reply.createtime, fullYear)}}</text>
							</view>
						</view>
						<view class="commit-num">
							<view class="num-warp"  @click="onLike(reply)">
								<view class="cuIcon-like" v-if="reply.islike=='N'"></view>
								<view class="cuIcon-likefill text-red" v-else></view>
								<view class="num">{{reply.likenum}}</view>
							</view>
						</view>
					</view>
					</block>
				</view>
				
			</block>
		</view>
		
		<!-- 底部 -->
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar solid-top bg-white shadow foot" 
			style="z-index: 99;"
		>
			<view class="action">
				<view class="author-warp" v-if="authorInfo.nickname">
					<view class="avater-warp"  @click="$jumpPages('playinfo', {othername: authorInfo.username})">
						<image class="avater"  :src="authorInfo.headurl" mode="aspectFill"></image>
					</view>
					<view class="nickname text-cut">{{authorInfo.nickname}}</view>
					<button class="cu-btn line-cyan round sm"
						v-if="authorInfo.isattent =='N'"
						@click.stop="addFans"
					>+关注</button>
					<button class="cu-btn line-gray round sm"
						v-else
						@click.stop="delFans(fans)"
					>已关注</button>
				</view>
			</view>
			<view class="action">
				<view class="margin-right" @click.stop="onLike(communityDetail)">
					<text class="cuIcon-like" v-if="communityDetail.islike=='N'"></text>
					<text class="cuIcon-likefill text-red" v-else></text>
					<text class="margin-left-xs">{{communityDetail.likenum}}</text>
				</view>
				<view class="" @click.stop="onShowComment">
					<text class="cuIcon-comment"></text>
					<text class="margin-left-xs">{{communityDetail.replynum}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="cu-modal bottom-modal" 
			style="z-index: 998;"
			:class="modalShow?'show':''"
			@touchmove.stop.prevent="preventhidden"
			@tap="onHideComment"
		>
			<view class="cu-dialog" @tap.stop="preventhidden">
				<view class="cu-bar input text-left">
					<input class="solid-bottom" 
						:placeholder="replyTool.placeholder"
						@focus="InputFocus" 
						@blur="InputBlur" 
						:adjust-position="true"
						:focus="modalShow" 
						maxlength="300" 
						cursor-spacing="10"
					></input>
					<button class="cu-btn bg-green shadow-blur"
						@click.stop="onSubmitComment"
					>发送</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script module="format" lang="wxs">
	function textdata (title) {
		if (!title) return ''
		return decodeURI(title)
	}
	function timedata (startdate, fullYear) {
		var fullYear = fullYear + '-'
		var Yy = startdate.substring(0,4) + '-'
		var Mm = startdate.substring(4,6) + '-'
		var Dd = startdate.substring(6,8)
		if(fullYear == Yy) {
			Yy =''
		}
		return Yy + Mm + Dd 
	}
    module.exports = {
		textdata: textdata,
		timedata: timedata
    }
</script>

<script>
import { mapState } from 'vuex';
import ViewScenario from '@/components/box/ViewScenario.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import empty from "@/components/basics/empty.vue";
import { User } from '@/models/user.js';
let user = new User()
export default {
	components: {
		ViewScenario,
		uniLoadMore,
		empty
	},
	data() {
		return {
			fullYear: new Date().getFullYear(),
			navigationBarHeight: this.systemInfo.navigationBarHeight,
			clickFans: true,
			modalShow: false,
			InputBottom: 0,
			dyid: '',
			replyTool: {
				placeholder: "评论...",
				replytext: '',
			},
			pagenum: 1,
			authorInfo: {},
			communityDetail: {},
			communityCommit: [],
			
		};
	},
	computed: {
		...mapState({
			"userInfo": state => state.userInfo,
		}),
	},
	onLoad(option) {
		console.log(this.userInfo);
		if(option && option.dyid) {
			this.dyid = option.dyid || 'dycp1739178593220200925165043776'
			this.getCommunityDetail()
			this.getCommunityCommit()
		}
		
	},
	methods: {
		async getCommunityDetail() {
			let communityDetail = await this.$apis.getCommunityDetail({
				dyid: this.dyid
			})
			this.communityDetail = communityDetail
			this.getAuthorInfo(communityDetail.username)
		},
		
		async getAuthorInfo(othername) {
			this.authorInfo = await user.getOtherInfo(othername)
		},
		
		onShowComment(e) {
			if(e.username) {
				this.replyTool.commentid = e.commentid
				this.replyTool.othername = e.username
				this.replyTool.placeholder = '回复 ' + e.nickname
			}else{
				this.replyTool.commentid = ''
				this.replyTool.othername = ''
				this.replyTool.placeholder =  "评论..."
			}
			this.modalShow = true
		},
		async onSubmitComment() {
			if(this.replyTool.replytext == '') {
				this.$mTool.showToast({
					title: '说点什么吧',
					icon: 'none'
				})
				return
			}
			if (this.replyTool.commentid == '') {
				await this.$apis.submitCommunity({
					dyid: this.dyid,
					replytext: this.replyTool.replytext
				}).then(() => {
					this.replyTool.replytext = ''
					this.onHideComment()
					this.getCommunityCommit()
					this.communityDetail.replynum  = this.communityDetail.replynum- 0 + 1
				}) 
			}else {
				await this.$apis.submitReplyText({
					dyid: this.dyid,
					commentid: this.replyTool.commentid,
					othername: this.replyTool.othername,
					replytext: this.replyTool.replytext
				}).then(() => {
					this.replyTool.replytext = ''
					this.onHideComment()
					this.getCommunityCommit()
					this.communityDetail.replynum  = this.communityDetail.replynum- 0 + 1
				})
			} 
			
			
			
		},
		
		async getCommunityCommit() {
			let communityCommit = await this.$apis.getCommunityCommit({
				dyid: this.dyid,
				pagenum: this.pagenum
			})
			this.communityCommit = communityCommit.map(item => {
				item.replyList = []
				return item
			})
		},
		
		async getCommunityReplyList(index, commentid) {
			let communityReplyList = await this.$apis.getCommunityReplyList({
				dyid: this.dyid,
				commentid
			})
			this.communityCommit[index].replyList = communityReplyList
			// this.communityCommit = communityCommit
			console.log(this.communityCommit);
		},
		async addFans() {
			this.clickFans = false
			this.$apis.addFans({
				othername: this.authorInfo.username,
			}).then(res => {
				this.authorInfo.isattent = 'Y'
				this.$mTool.showToast({
					title: '关注成功',
					icon: 'none'
				})
				this.clickFans = true
			}).catch(err => {
				this.clickFans = true
			})
		},
		async delFans() {
			this.clickFans = false
			this.$apis.delFans({
				othername: this.authorInfo.username,
			}).then(res => {
				console.log(res);
				this.authorInfo.isattent = 'N'
				this.$mTool.showToast({
					title: '取关成功',
					icon: 'none'
				})
				this.clickFans = true
			}).catch(err => {
				this.clickFans = true
			})
		},
		onLike(reply) {
			let param = { dyid: reply.dyid }
			if(!reply.commentid) {
				param.type = 'D'
				param.othername	= reply.username
			} else {
				param.type = reply.replytype
				param.commentid =  reply.commentid
				if(reply.replytype=='R') {
					param.replyid = reply.replyid
				}
			}
			
			if(reply.islike == 'N') {
				this.$apis.onLikeCommunity(param).then(() => {
					reply.islike = 'Y'
					reply.likenum = reply.likenum + 1
				})
			}else if(reply.islike == 'Y') {
				this.$apis.cancelLikeCommunity(param).then(() => {
					reply.islike = 'N'
					reply.likenum = reply.likenum - 1
				})
			}
		},
		
		onShopCollect() {
			
		},
		
		
		
		onHideComment() {
			this.modalShow = false
		},
		InputFocus(e) {
			this.InputBottom = e.detail.height
		},
		InputBlur(e) {
			this.InputBottom = 0
			this.replyTool.replytext = e.detail.value;
		},
		
		preventhidden() {
			return false
		},
		videoErrorCallback(e) {
			console.log(0, e);
			// uni.showModal({
			// 	content: e.target.errMsg,
			// 	showCancel: false
			// })
		},
	}
}
</script>

<style lang="scss" scoped>
.commit-input{
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	.avater-warp{
		width: 72rpx;
		height: 72rpx;
		margin-right: 16rpx;
		.avater{
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			background-color: #F1F1F1;
		}
	}
	.input{
		width: 0;
		flex: 1;
		background-color: #F1F1F1;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 72rpx;
		padding: 0 24rpx;
	}
}
.author-warp{
	display: flex;
	align-items: center;
	.avater-warp{
		width: 56rpx;
		height: 56rpx;
		margin-right: 16rpx;
		.avater{
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}
	}
	.nickname{
		color: #323232;
		font-size: 28rpx;
		margin-right: 30rpx;
		max-width: 300rpx;
	}
}

.dy-foot{
	margin: 0 30rpx 30rpx;
	display: flex;
	justify-content: space-between;
}
.community-dy{
	padding: 30rpx;
	.dy-img{
		width: 100%;
		margin-bottom: 10rpx;
	}
	.dy-text{
		font-size: 28rpx;
		height: 1.6;
		margin-bottom: 20rpx;
	}
	.dy-video{
		width: 100%;
	}
}
.dy-commit{
	margin: 0 30rpx;
	padding: 16rpx 0;
	.commit-warp{
		display: flex;
		padding: 16rpx 0;
	}
	.nickname{
		color: #999;
		font-size: 24rpx;
		margin-bottom: 6rpx;
	}
	.avater-warp{
		width: 72rpx;
		height: 72rpx;
		margin-right: 16rpx;
		.avater{
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
		}
	}
	.commit-info{
		width: 0;
		flex: 1;
		.comment{
			color: #333;
			font-size: 28rpx;
		}
		.data{
			display: inline-block;
			color: #666;
			font-size: 20rpx;
			margin-left: 8rpx;
		}
	}
	.commit-num{
		min-width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.reply-more{
		margin-left: 88rpx;
		padding-bottom: 10rpx ;
	}
	.reply-list{
		margin-left: 88rpx;
	}
	.reply-item{
		display: flex;
		padding-top: 16rpx;
	}
}
.shop{
	.shop_shadow{
		box-sizing: border-box;
		border: 1px solid #e3e3e3;
		overflow: hidden;
		padding: 0 24rpx;
		border-radius: 20rpx;
		box-shadow:  1px 1px 10px #dfdfdf;
		position: relative;
		margin-top: 20rpx;
	}
	.shop-mode {
	    padding: 24rpx 0;
		&~.shop-mode:after {
		    position: absolute;
		    z-index: 3;
		    bottom: 50%;
		    left: 24rpx;
		    right: 24rpx;
		    height: 1px;
		    content: "";
		    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);
		    background-color: #c8c7cc;
		}
	}
	.img-warp {
	    width: 124rpx;
	    height: 124rpx;
	    overflow: hidden;
	    border-radius: 20rpx;
	    background: #e3e3e3;
	    float: left;
		.img{
			width: 124rpx;
			height: 124rpx;
		}
	}
	.text-warp{
	    margin-left: 144rpx;
	    margin-right: 176rpx;
	    text-align: left;
	    min-height: 124rpx;
	    padding: 6rpx 10rpx;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    position: relative;
		.title{
		    font-size: 30rpx;
		    color: #000;
		    font-weight: 700;
		}
		.desc{
		    font-size: 24rpx;
		    color: #747474;
		    line-height: 1.4;
		    overflow: hidden;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		}
	}
	
	.icon-warp{
	    float: right;
	    min-height: 124rpx;
	    line-height: 124rpx;
	    color: #656565;
	    font-size: 24rpx;
	    display: flex;
	    align-items: center;
		.icon{
		    width: 28rpx;
		    height: 28rpx;
			margin-right: 10rpx;
		}
	}
}
</style>